<!--竞猜篮球-混合选购 -->
<template>
	<view>
		<uni-collapse ref="collapse">
			<uni-collapse-item style="background-color: #f5f5f5;" :open="true">
				<template v-slot:title>
					<view class="collapse-item" >
						<view class="collapse-item-title">
							<text class="ml10">2025-04-10期</text>
							<text class="ml10">周三</text>
							<text class="ml10">共<text style="color: red;">8</text>场比赛</text>
							<text class="ml10">截止22:00</text>
						</view>
					</view>
				</template>
				<view class="content" >
					<view class="match-body" v-for="i in 13">
						<view class="match-title">
							<view class="left">
								<p>周三301</p>
								<p class="match-type">美职联</p>
							</view>
							<view class="team-info">
								<view>
									<text class="away-text">客</text>
									<text class="gray-text">[2]</text>
									<text class="team-name">火箭</text>
								</view>
								<view class="gray-text match-time">
									<p>04-09</p>
									<p>13:09</p>
								</view>
								<view>
									<text class="team-name">湖人</text>
									<text class="gray-text">[1]</text>
									<text class="home-text">主</text>
								</view>
							</view>
							<view class="right">
								<view class="gray-text" @click="openMatchModel">
									<text>分析</text>
									<text :class="state.showMatchModel?'cicon-drop-up':'cicon-drop-down'" style="font-size: 20px;" />
								</view>
							</view>
						</view>
						<table class="game_data game_data1 ball-table">
							<tr >
								<td width="20%" style="color: white; background: rgb(119, 50, 177);position: relative;">
									<image src="@/static/images/danguan.png"></image>
									胜负</td>
								<td width="39%" class="select-game-data">
									<text class="c_999 ">客胜</text>
									<text class="data-value">1.78</text>
								</td>
								<td>
									<text class="c_999">主胜</text>
									<text class="data-value">1.78</text>
								</td>
							</tr>
							<tr>
								<td width="20%" style="color: white; background: rgb(47, 66, 175);position: relative;">
									<image src="@/static/images/danguan.png"></image>
									让分</td>
								<td width="39%">
									<text class="c_999">客胜</text>
									<text class="data-value">1.78</text>
								</td>
								<td>
									<text class="c_999">主胜<text class="data-value-green">(-5.5)</text></text>
									<text class="data-value">1.78</text>
								</td>
							</tr>
							<tr>
								<td width="20%" style="color: white; background: rgb(28, 175, 42); color: white;position: relative;">
									<image src="@/static/images/danguan.png"></image>
									大小分</td>
								<td width="39%">
									<text class="c_999">大于234.5</text>
									<text class="data-value">1.78</text>
								</td>
								<td>
									<text class="c_999">小于234.5</text>
									<text class="data-value">1.78</text>
								</td>
							</tr>
							<tr>
								<td width="20%" style="background: rgb(255, 95, 39); color: white;position: relative;">
									<image src="@/static/images/danguan.png"></image>
									胜分差
								</td>
								<td width="39%" colspan="2">
									<table>
										<tr>
											<td colspan="3" class="away-text">火箭(客) 胜</td>
										</tr>
										<tr>
											<td>
												<text class="c_999">1-5</text>
												<text class="data-value">1.78</text>
											</td>
											<td>
												<text class="c_999">6-10</text>
												<text class="data-value">1.78</text>
											</td>
											<td>
												<text class="c_999">11-15</text>
												<text class="data-value">1.78</text>
											</td>
										</tr>
										<tr>
											<td>
												<text class="c_999">16-20</text>
												<text class="data-value">1.78</text>
											</td>
											<td>
												<text class="c_999">21-25</text>
												<text class="data-value">1.78</text>
											</td>
											<td>
												<text class="c_999">26+</text>
												<text class="data-value">1.78</text>
											</td>
										</tr>
										<tr>
											<td colspan="3" class="home-text">湖人(主) 胜</td>
										</tr>
										<tr>
											<td>
												<text class="c_999">1-5</text>
												<text class="data-value">1.78</text>
											</td>
											<td>
												<text class="c_999">6-10</text>
												<text class="data-value">1.78</text>
											</td>
											<td>
												<text class="c_999">11-15</text>
												<text class="data-value">1.78</text>
											</td>
										</tr>
										<tr>
											<td>
												<text class="c_999">16-20</text>
												<text class="data-value">1.78</text>
											</td>
											<td>
												<text class="c_999">21-25</text>
												<text class="data-value">1.78</text>
											</td>
											<td>
												<text class="c_999">26+</text>
												<text class="data-value">1.78</text>
											</td>
										</tr>
									</table>
									
								</td>
							</tr>
						</table>
						
						</view>
				</view>

			</uni-collapse-item>

		</uni-collapse>


		<!-- 比赛数据分析弹窗 -->
		<su-popup :show="state.showMatchModel" type="bottom" round="10" @change="matchModelChange" :space="60"
			:zIndex="9000" :showClose="true">
			<view class="model-box ss-flex-col">
				<view class="ss-m-t-56 ss-flex-col ss-col-center">
					<text class="cicon-check-round"></text>
					<view class="score-title">
						<text>比赛数据分析界面 </text>
						<text> 比赛数据分析界面 </text>
					</view>
					<view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
						比赛数据分析界面 
					</view>
				</view>
				<view class="model-bg ss-flex-col ss-col-center ss-row-right">
					<view class="title ss-m-b-64">比赛数据分析界面 </view>
					<view class="ss-m-b-40">
						<button class="ss-reset-button confirm-btn">确认</button>
					</view>
				</view>
			</view>
		</su-popup>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	const props = defineProps({
		item: {
			type: Object,
			default () {},
		},
	});
	const state = reactive({
		showMatchModel: false,
		showDataModel: false,
	});

	function openMatchModel(e) {
		state.showMatchModel = true;
	};

	function openDataModel(e) {
		state.showDataModel = true;
	};

	function dataModelChange(e) {
		state.showDataModel = e.show;
	};

	function matchModelChange(e) {
		state.showMatchModel = e.show
	};
</script>

<style lang="scss" scoped>
	.collapse-item {
		padding-top: 5px;
		
	}

	.collapse-item-title {
		height: 15px;
		line-height: 15px;
		margin-bottom: 5px;
		font-size: 14px;
		color: #39b54a
		
	}
	.content{
		background-color: #f5f5f5;
	}
	.left{
		color: #ff557f;
		font-weight: bold;
	}
	.ml10 {
		margin-left: 10px;
	}

	.match-body {
		margin-top: 2px;
		padding: 7px 10px;
		background-color: white;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}

	.match-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.match-type {
		background-color: green;
		color: white;
		text-align: center;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
	}

	.team-info {
		display: flex;
		flex-direction: row;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.match-data {
		display: flex;
		flex-direction: row;
		justify-content: space-around;

	}

	.data-item {
		border: 1px solid #d1d1f5;
		border-radius: 4px;
		margin: 2px 2px;
		padding: 10px 5px;
		text-align: right;
		width: 90px;
		background-color: #f5f5f5;
		font-size: 14px;

	}

	.other {
		width: 50px;
		font-size: 8px;
		height: 18px;
	}

	.gray-text {
		color: gray;
	}
	.away-text {
		color: #1d91f2;
	}
	.home-text {
		color: #ff557f;
	}
	.match-time {
		margin-left: 8px;
		margin-right: 8px;
	}

	.team-name {
		font-size: 14px;
		font-weight: bold;
		padding: 5px 5px;
	}

	.data-item-view {
		margin-right: 20%;
	}

	.game-rs {
		font-weight: bold;
		margin-left:5px;
		margin-right:5px;
	}

	.game-ps {
		color: gray;
	}

	.game-rq-red {
		color: red;
	}

	.game-rq-green {
		color: green;
	}

	.select-game-data {
		background-color: #fc3123;

	}

	.select-game-data text {
		color: #f5f5f5;
	}
	.select-game-data p {
		color: #f5f5f5;
	}

	.match-fenxi {
		background-color: red;
	}

	.popup-body {
		margin: 10px 10px;
	}
	.popup-data{
		display: flex;
		flex-direction: row;

	}
	.popup-data-left{
		border: 1px solid #fc3123;
		padding: 5px 5px;
		margin: 5px 3px;
		width: 20px;
		text-align: center;
		border-radius: 3px;
	}
	.text-orientation-upright{
		  writing-mode: vertical-rl; /* 从右到左的垂直排列 */
		  text-orientation: upright; /* 文本方向保持直立 */
	}
	.popup-match-data{
		width: 90%;
	}
	.popup-match-type {
		background-color: green;
		color: white;
		text-align: center;
		border-radius: 3px;
		padding: 3px 3px;
		font-size: 8px;
	}
	table{
			    width: 100%;
			    text-align: center;
			    border-collapse: collapse;
			    font-size: 13px;
				border-radius: 5px;
	}
	.ball-table{
	    margin-top: 8px;
	    width: 100%;
	    text-align: center;
	    border-collapse: collapse;
	    font-size: 13px;
	}
	table tr {
		height:30px;
	}
	table td {
	    border: 1px solid #ccc;
	}
	image {
			width: 25px;
			height: 25px;
			position: absolute;
			left: -3px;
			top: -3px;
	}
	.data-name{
		font-weight: bold;
	}
	.data-value{
		color: #969696;
		margin-left: 5px;
	}
	.dangguan-bg {
	    background: #ffebeb;
	    color: #f24444;
	}
	.dangguan-no-bg{
		     background: #dbefff;
		     color: #1d91f2;
	}
	.popup-footer{
		text-align: center;
		padding: 10px 30px;
		display: flex;
		justify-content: space-around;
	}
	.data-value-green{
		color: #39b54a;
	}
</style>